@import "../../styles/variables.less";
.Xmp-Home-page {
  display: flex;
  flex-direction: column;
  background: url('../../image/home/home_background.svg#svgView(preserveAspectRatio(none))') center center no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  padding: @size20px @size20px @size84px @size20px;
  box-sizing: border-box;
  &-header {
    display: flex;
    justify-content: space-between;
    &-logo {
      display: flex;
      align-items: center;
      &-text {
        font-family: PingFangSC-Medium;
        font-size: @size20px;
        line-height: @size32px;
        font-weight: normal;
        letter-spacing: 0em;
        color: @font-default-color;
        margin-left: @size20px;
      }
    }
    &-avatar {
      display: flex;
      align-items: center;
      &-text {
        margin-left: @size8px;
        height: @size20px;
        font-family: DIN-Regular;
        font-size: @size14px;
        font-weight: normal;
        line-height: @size20px;
        letter-spacing: 0em;
        color: @font-default-color;
      }
    }
    
  }
  &-body {
    margin-top: @size160px;
    &-title {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-bottom: @size40px;
      font-family: PingFangSC-Regular;
      font-size: @size36px;
      font-weight: normal;
      line-height: @size48px;
      letter-spacing: 0.3em;
      color: @font-default-color;
    }
    &-cardwrapper {
      display: flex;
      justify-content: center;
      &-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 @size12px;
        width: @size380px;
        padding-bottom: @size10px;
        // height: @size246px;
        background: url(../../image/home/card.svg) no-repeat;
        background-size: 100% 100%;
        color: @font-default-color;
        cursor: pointer;
        transition: all 0.5s;

        &:hover {
          transform: scale(1.05);
        }
        &-logo {
          margin: @size30px 0 @size24px;
        }
        &-title {
          height: @size22px;
          font-family: PingFangSC-Medium;
          font-size: @size18px;
          font-weight: normal;
          letter-spacing: 0em;
        }
        &-desc {
          height: @size36px;
          font-family: PingFangSC-Regular;
          font-size: @size14px;
          font-weight: normal;
          line-height: @size20px;
          margin-top: @size8px;
          letter-spacing: 0em;
        }
        &-actions {
          display: flex;
          width: 100%;
          box-sizing: border-box;
          padding: 0 @size20px;
          justify-content: space-between;
          margin-top: @size36px;
          padding-bottom: @size10px;

          &-filewrapper {
            display: flex;
            align-items: center;
            &-file {
              display: flex;
              align-items: center;
              cursor: pointer;
              &-name {
                display: inline-block;
                width: @size58px;
                // height: @size17px;
                text-overflow: ellipsis;
                font-family: SourceHanSansCN-Regular;
                font-size: @size12px;
                font-weight: normal;
                letter-spacing: 0em;
                color: @font-default-color;
                overflow:hidden; 
                text-overflow:ellipsis; 
                white-space:nowrap; 
              }
              &:hover &-name{
                color: @blue-main-color;
              }
              
            }
          }
          &-create {
            display: flex;
            align-items: center;
            cursor: pointer;
            &-logo {
              transition: all 0.5s;
            }
            &:hover &-logo {
              margin-right: -@size5px;
            }
            &-text {
              // width: @size56px;
              height: @size20px;
              font-family: PingFangSC-Regular;
              font-size: @size14px;
              font-weight: normal;
              letter-spacing: 0em;
              color: @blue-main-color;
              margin-left: @size14px;
            }
            
          }
        }
      }
    }
    
  }
  &-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: @size182px;
    &-function {
      display: flex;
      align-items: center;
      position: relative;
      cursor: pointer;
      padding-left: @size10px;
      padding-right: @size8px;
      &-textwrapper {
        display: flex;
        flex-direction: column;
        // padding-right: 10px;
        padding-left: @size16px;
        &-title {
          height: @size24px;
          margin-top: -@size8px;
          margin-bottom: @size8px;
          font-family: PingFangSC-Medium;
          font-size: @size16px;
          font-weight: normal;
          line-height: @size24px;
          letter-spacing: 0em;
          color: #313CA9;
        }
        &-desc {
          // width: @size126px;
          height: @size17px;
          font-family: SourceHanSansCN-Regular;
          font-size: @size14px;
          font-weight: normal;
          line-height: @size17px;
          letter-spacing: 0em;
          color: #313CA9;
        }
       
      }
      &-mask {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(100% - @size10px);
        height: 0;
        border-radius: @size4px;
        opacity: 0.8;
        background: linear-gradient(180deg, #3370FF 16%, #3370FF 16%, #165DFF 100%, #165DFF 100%);
        box-shadow: 0px 0px @size10px 0px rgba(24, 59, 138, 0.2);
        transition: all 0.2s;
        overflow: hidden;
        font-family: SourceHanSansCN-Regular;
        font-size: @size14px;
        font-weight: normal;
        color: #FFFFFF;
      }
      &:hover &-mask{
        height: @size89px;
      }
    }
    &-addmore {
      display: flex;
      position: relative;
      width: @size206px;
      min-width: @size206px;
      cursor: pointer;
      height: @size89px;
      justify-content: center;
      align-items: center;
      margin-left: @size10px;
      background: url('../../image/home/add_more_background.svg');
      &-mask {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: @size206px;
        height: 0;
        border-radius: @size4px;
        opacity: 0.8;
        background: linear-gradient(180deg, #3370FF 16%, #3370FF 16%, #165DFF 100%, #165DFF 100%);
        box-shadow: 0px 0px @size10px 0px rgba(24, 59, 138, 0.2);
        transition: all 0.2s;
        overflow: hidden;
        font-family: SourceHanSansCN-Regular;
        font-size: @size14px;
        font-weight: normal;
        color: #FFFFFF;
      }
      &:hover &-mask{
        height: @size89px;
      }
    }
    &-split {
      margin-left: @size10px;
      width: 1px;
      height: @size60px;
      background-color: #98AEE1;
    }
  }
  @media only screen and (min-height: @size760px) {
    .Xmp-Home-page {
      &-footer {
        margin-top: @size80px;
      }
    }
  }
  @media only screen and (min-height: @size900px) {
    .Xmp-Home-page {
      &-footer {
        margin-top: @size180px;
      }
    }
  }
  @media only screen and (min-height: @size950px) {
    .Xmp-Home-page {
      &-footer {
        margin-top: @size260px;
      }
    }
  }
  @media only screen and (min-height: @size1030px) {
    .Xmp-Home-page {
      &-footer {
        margin-top: @size280px;
      }
    }
  }
  @media only screen and (min-height: @size1070px) {
    .Xmp-Home-page {
      &-footer {
        margin-top: @size340px;
      }
    }
  }
  @media only screen and (min-height: @size1100px) {
    .Xmp-Home-page {
      &-footer {
        margin-top: @size420px;
      }
    }
  }
}